<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移库出库</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
<div id="app">
    <el-button type="text" @click="update()">移库入库</el-button>
    <!--单选框multipleSelection单选框方法    handleSelectionChange-->
    <template>
        <el-table
                ref="multipleSelection"
                :data="pageContext.records"
                tooltip-effect="dark"
                style="width: 100%"
                :default-sort="{prop: 'id'}"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="移库id"
                    sortable
                    label="id"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移库单号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvNo}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移出仓库"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvOut}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移入仓库"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvIn}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="转移商品"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvGoods}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移库原因"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvMark}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移库负责人"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvPerson}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系电话"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvTel}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="移库时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.mvTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
            </el-table-column>
        </el-table>
    </template>
    </template>
    <el-dialog :visible.sync="iomWareMoveA" :title="titleMove2" width="1200px">
        *移出库名: <p> {{iomwar.iomName}}</p>
        *移出商品名称:<p> {{iomwar.iomGoods}}</p>
        <el-table
                :data="iomWare"
                tooltip-effect="dark"
                style="width:100%"
                :default-sort="{prop: 'id'}">
            <el-table-column
                    label="序号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomGoodsno}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomGoods}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货区">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomArea}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货架">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomShelves}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货位">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomCargoloca}}</span>
                </template>
            </el-table-column>
        </el-table>
        *移入库名: <p> {{iomwar.iomOutname}}</p>
        *移入商品名称: <p>{{iomwar.iomOutgoods}}</p>
        <el-table
                :data="iomWare"
                tooltip-effect="dark"
                style="width:100%"
                :default-sort="{prop: 'id'}">
            <el-table-column
                    label="序号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomGoodsno}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomOutgoods}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomOutname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货区">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomOutarea}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货架">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomOutshelves}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出库货位">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomOutcargoloca}}</span>
                </template>
            </el-table-column>
        </el-table>
        <p>负责人: {{Movepeople}}</p>
        <p>联系电话: {{Movetel}}</p>
        <p>移库时间: {{iomwar.iomOuttime}}</p>
        <p>移库数量:{{Movenumber}}</p>
        <p>移库原因:{{Movewhy}}</p>
    </el-dialog>

    <el-dialog :visible.sync="moveMenu" :title="title" width="1200px" @close="close()">
        <el-form :model="moveWare">
            <el-form-item label="选择仓库" :label-width="formLabelWidth">
                <el-select v-model="moveWare.mid">
                    <el-option label="默认" :value="0"></el-option>
                    <el-option
                            v-for="m in menu"
                            :key="m.id"
                            :label="m.wareName"
                            :value="m.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="转移商品" :label-width="formLabelWidth">

                <el-input v-model="moveWare.goodsName" autocomplete="off"></el-input>
                <el-button icon="el-icon-search" circle @click="searchGoods()"></el-button>
                <el-table
                        :data="good"
                        tooltip-effect="dark"
                        style="width:100%"
                        :default-sort="{prop: 'id'}">
                    <el-table-column
                            label="商品编号">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pnumber}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品名称">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品价格">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pprice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="分类">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.penterprise}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="当前数量">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.tcargo.num}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="所在库区">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{scope.row.tcargo.tshelves.treservoir.goodsName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="所在货架编号">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{scope.row.tcargo.tshelves.shelvesNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="所在货位编号">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{scope.row.tcargo.catgoNo}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="选择仓库" :label-width="formLabelWidth">
                <el-select v-model="moveWare.mlid" @change="findTr">
                    <el-option label="默认" :value="0"></el-option>
                    <el-option
                            v-for="m in lmenu"
                            :key="m.id"
                            :label="m.wareName"
                            :value="m.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="转移商品" :label-width="formLabelWidth">
                <el-table
                        :data="good"
                        tooltip-effect="dark"
                        style="width:100%"
                        :default-sort="{prop: 'id'}">
                    <el-table-column
                            label="商品编号">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pnumber}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品名称">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品价格">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.pprice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="分类">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.penterprise}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="移库数量">
                        <template slot-scope="scope">
                            <el-input v-model="moveWare.num" autocomplete="off"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="转移的库区">
                        <template slot-scope="scope">
                            <el-select v-model="trid" @change="findsh">
                                <el-option label="默认" :value="0"></el-option>
                                <el-option
                                        v-for="m in TReservoirs"
                                        :label="m.goodsName"
                                        :value="m.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="转移货架">
                        <template slot-scope="scope">
                            <el-select v-model="moveWare.cid" @change="findCargo">
                                <el-option label="默认" :value="0"></el-option>
                                <el-option
                                        v-for="m in TShelves"
                                        :key="m.id"
                                        :label="m.shelvesNo"
                                        :value="m.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="转移货位编号">
                        <template slot-scope="scope">
                            <el-select v-model="moveWare.hid" @change="eqTcago">
                                <el-option label="默认" :value="0"></el-option>
                                <el-option
                                        v-for="m in Cargo"
                                        :key="m.id"
                                        :label="m.catgoNo"
                                        :value="m.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEditMove(scope.$index, scope.row)">移货
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="moveWare.person" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="moveWare.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="移库时间" :label-width="formLabelWidth">
                <el-date-picker v-model="moveWare.time" value-format="timestamp" type="datetime"
                                placeholder="移库时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="移库原因" :label-width="formLabelWidth">
                <el-input v-model="moveWare.why" type="datetime" value-format="timestamp" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="移库数量" :label-width="formLabelWidth">
                <el-input v-model="moveWare.num" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[1,2,3,4]"
                :page-size="row"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageContext.total">
        </el-pagination>
    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            pageContext: "",
            total: 0,
            current: 1,
            moveMenu: false,
            formLabelWidth: '120px',
            TMovWarehouse: "",
            row: 5,
            multipleSelection: [],
            dialogTreeVisible: false,
            title: "",
            menu: "",
            lmenu: "",
            good: [{}],
            TReservoirs: [],
            trid: "",
            TShelves: "",
            Cargo: [],
            iomWare: [{}],
            Movepeople: "",
            Movetel: "",
            Movenumber: "",
            Movewhy: "",
            iomwar: {
                iomName: "",
                iomGoods: "",
                iomOutname: "",
                iomOutgoods: "",
                iomOuttime: ""
            },
            titleMove2: "",
            iomWareMoveA: false,
            moveWare: {
                mlid: "",
                mid: "",
                goodsName: "",
                person: "",
                tel: "",
                why: "",
                num: "",
                shlid: "",
                tsid: "",
                cid: "",
                hid: ""
            },
        },

        methods: {
            page: function () {
                axios.get("/findTMoveWarehouse?current=" + this.current + "&&row=" + this.row).then(res => {
                    this.pageContext = res.data
                })
            },
            Menu: function () {
                axios.get("/findMenuDy").then(res => {
                    this.menu = res.data
                    this.lmenu = res.data
                })
            },
            //跳转页面
            handleSizeChange(val) {
                this.current = 1
                this.row = val
                this.page()
            },//点击当前页
            handleCurrentChange(val) {
                this.current = val
                this.page()
            },

            searchGoods() {
                if (this.moveWare.mid == 0 || this.moveWare.goodsName == "") {
                    confirm("你的仓库和你的商品不能为空")
                } else {
                    axios.get("/commodities/" + this.moveWare.goodsName + "/" + this.moveWare.mid).then(res => {
                        this.good = res.data
                        if (this.good.length == 0) {
                            confirm("你输入的商品不存在")
                        }
                    })
                }
            },
            update() {
                this.good.length = 0
                this.Menu();
                this.title = "移库申请"
                this.TMovWarehouse = ""
                this.moveMenu = true
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleSelection.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleSelection.clearSelection();
                }
            },
            //点击单选框按钮
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val)
            },
            close() {
                this.menu = ""
                this.good.length = 0
                this.moveWare = {
                    mlid: "",
                    mid: "",
                    goodsName: "",
                    person: "",
                    tel: "",
                    why: "",
                    num: "",
                    tsid: "",
                    cid: ""
                }
                this.TShelves = []
            },
            findTr() {
                axios.get("/reservoir/" + this.moveWare.mlid).then(res => {
                    this.TReservoirs = res.data
                })
            },
            findsh() {
                axios.get("/tshelvesById/" + this.trid).then(res => {
                    this.TShelves = res.data
                })
            },
            findCargo() {
                axios.get("/findDyCargo/" + this.moveWare.cid).then(res => {
                    this.Cargo = res.data
                })
            },
            handleEdit: function (index, row) {
                axios.get("/iomWare/" + row.number).then(res => {
                    this.iomwar = res.data
                    this.iomWare = new Array();
                    this.iomWare.push(this.iomwar)
                    this.titleMove2 = "移库详细"
                    this.Movepeople = row.mvPerson
                    this.Movetel = row.mvTel
                    this.Movewhy = row.mvMark
                    this.Movenumber = row.mvNumber
                    this.iomWareMoveA = true
                })
            },
            handleEditMove: function (index, row) {
                if (this.moveWare.person == "") {
                    alert("负责人不能为空！！！")
                    if (this.moveWare.tel == "") {
                        alert("电话不能为空！！！")
                        if (this.moveWare.time == "") {
                            alert("移库时间不能为空！！！")
                            if (this.moveWare.why == "") {
                                alert("移库原因不能为空！！！")
                            }
                        }
                    }
                } else {
                    let date = new Date(row.tcargo.creatTime);
                    var Ctime = date.valueOf();
                    let nnum = parseInt(Math.random() * 1000)
                    let cargody = {
                        beforeCatgoNo: row.tcargo.catgoNo,
                        catgoNo: this.moveWare.hid,
                        shelvesNo: this.moveWare.cid,
                        damId: this.trid,
                        wareId: this.moveWare.mlid,
                        product: row.pname,
                        creatTime: Ctime,
                        status: "1",
                        batch: row.tcargo.batch,
                        num: this.moveWare.num
                    }
                    if (this.moveWare.num > row.tcargo.num) {
                        alert("对不起你超过了该库位的最大数量")
                    } else {
                        if (this.moveWare.num == "") {
                            alert("你没有输入移库的数量")
                        } else {
                            axios.post("/moveGoods", cargody).then(res => {
                                let date = new Date();
                                let mvMtime = date.valueOf(this.moveWare.time);
                                let tmoveware = {
                                    id: 0,
                                    mvOut: this.moveWare.mid,
                                    mvIn: this.moveWare.mlid,
                                    mvGoods: row.pname,
                                    mvNumber: this.moveWare.num,
                                    mvMark: this.moveWare.why,
                                    mvPerson: this.moveWare.person,
                                    mvTel: this.moveWare.tel,
                                    mvTime: mvMtime,
                                    number: nnum
                                }

                                let tiomWare = {
                                    id: 0,
                                    iomGoodsno: 0,
                                    iomGoods: this.moveWare.goodsName,
                                    iomName: this.moveWare.mid,
                                    iomArea: row.tcargo.damId,
                                    iomShelves: row.tcargo.shelvesNo,
                                    iomCargoloca: row.tcargo.catgoNo,
                                    iomTime: Ctime,
                                    iomOutname: this.moveWare.mlid,
                                    iomOutgoods: "0",
                                    iomOutarea: this.trid,
                                    iomOutshelves: this.moveWare.cid,
                                    iomOutcargoloca: this.moveWare.hid,
                                    iomOuttime: mvMtime,
                                    iomNo: 0,
                                    number: nnum
                                }
                                console.log(tiomWare)
                                if (res.data == "ok") {
                                    axios.post("/addTmove", tmoveware).then(res => {
                                        if (res.data == "ok") {
                                            axios.post("/WarehouseDY", tiomWare).then(res => {
                                                alert("移货成功")
                                                this.page();
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    }
                }
            }
            ,
            eqTcago() {
                axios.get("/eqTcago/" + this.moveWare.hid).then(res => {
                    if (res.data == "ok") {
                    } else {
                        alert("该货架有货！！！")
                    }
                })
            }
        },
        mounted() {
            this.page();

        }
    })
</script>
</body>
</html>